<template>
  <view class="container-success" v-if="loginSuccessFlag">
    <!-- 登录成功动画 -->
    <view class="login-success-anim">
      <svg class="success-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="60" height="60">
        <!-- 背景圆圈 -->
        <circle cx="50" cy="50" r="45" class="circle-path" />
        <!-- 勾号路径 -->
        <path class="checkmark-path" d="M20,50 L40,70 L80,30" stroke="white" stroke-width="5" fill="transparent" />
      </svg>
			<view class="success-text">登录成功</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const loginSuccessFlag = ref(false);  // 控制登录成功提示显示
defineExpose({
  customMethod() {
    // 模拟登录成功
	loginSuccessFlag.value = true;
	// 动画结束后隐藏提示
	setTimeout(() => {
		loginSuccessFlag.value = false;
	}, 2000);  // 动画展示4秒后隐藏
  }
});
</script>

<style scoped>
.container-success {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000000;
}

/* 登录成功提示的初始样式 */
.login-success-anim {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
	flex-direction: column;
  top: calc(50vh - 60rpx);
  left: calc(50vw - 65rpx);
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeInAnimation 1s ease-out forwards;
	background: #00000090;
	height: 120rpx;
	width: 130rpx;
	border-radius: 8rpx;
}
.success-text{
	padding-top: 10rpx;
	color: #2ecc71;
}

/* 登录成功动画 */
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 背景圆圈路径的绘制动画 */
.circle-path {
  fill: transparent;
  stroke-width: 5;
  stroke: #2ecc71;  /* 成功绿色 */
  stroke-dasharray: 230;  /* 圆的周长 */
  stroke-dashoffset: 10.74;  /* 初始状态：圆圈不可见 */
  animation: drawCircle 0.5s ease-out forwards; /* 圆圈绘制动画 */
}

/* 圆圈绘制动画 */
@keyframes drawCircle {
  0% {
    stroke-dashoffset: 182.74;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* 勾号路径的绘制动画 */
.checkmark-path {
  stroke-dasharray: 150;  /* 勾号路径总长度 */
  stroke-dashoffset: 150; /* 初始状态：路径不可见 */
  animation: drawCheckmark 0.5s ease-out 0.49s forwards; /* 延迟2秒开始绘制勾号 */
  stroke: #2ecc71;
  stroke-width: 5;
}

/* 勾号路径绘制动画 */
@keyframes drawCheckmark {
  0% {
    stroke-dashoffset: 150;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
</style>
